<template>
  <div class="div_right_add_friend_result_group">
    <!--  最好设置成一个一个的卡片.-->
    <!--   需要添加滚动条.-->
    <CScrollbar class="div_crollbar" width="1040px"
                height="560px">
      <div v-for="user in num" :key="user" class="div_display_inline_block div_right_add_friend_result_card">
        <div>
          <div class="div_display_inline_block" style="vertical-align: top;">
            <!--            图片.-->
            <img class="img_right_search_friend_result" :src="require('../../../assets/middle_session_photo_42.jpg')"
                 alt="">
          </div>
          <div class="div_display_inline_block" style="vertical-align: top;">
            <div class="div_right_add_friend_result_group_name">
              <b> 22马理论调剂2群(859486</b>
            </div>
            <div class="div_right_add_friend_result_group_number">
              <div style="display: inline-block">
                <el-icon size="14">
                  <User/>
                </el-icon>
              </div>
              <div style="display: inline-block">
                <p>1620|2000</p>
              </div>
            </div>
            <div class="div_right_add_friend_result_group_type">
              学习考试|考研
            </div>
          </div>

          <div class="div_right_add_friend_result_group_introduce">
            22马克思主义理论调剂群，欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊欢迎个位小伙伴入群阿发发发啊算法啊.
          </div>

          <div class="div_right_add_friend_result_group_button">
            <el-button size="small" type="primary">加好友</el-button>
          </div>
        </div>
      </div>
    </CScrollbar>
  </div>

</template>

<script>

import {CScrollbar} from "c-scrollbar"
import {User} from '@element-plus/icons'

export default {
  name: "right_add_friend_result",
  components: {CScrollbar, User},
  data() {
    return {
      // 这个页面的数据不需要进行通用.
      num: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10
      ]
    }
  },
  mounted() {
    // mounted每次进来都会执行一次.
    console.log("result.....")
  }
}
</script>

<style scoped>

.div_right_add_friend_result_group {
  background-color: #f7f7f7;
}

.div_display_inline_block {
  display: inline-block;
}

.div_right_add_friend_result_card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 300px;
  height: 150px;
  margin-left: 35px;
  margin-top: 30px;
}

.img_right_search_friend_result {
  border-radius: 6px;
  margin-top: 10px;
  margin-left: 10px;
  width: 72px;
  height: 72px;
  vertical-align: top;
  position: relative;
}

.div_right_add_friend_result_group_name {
  margin-left: 6px;
  vertical-align: top;
  position: relative;
  margin-top: 10px;
}

.div_right_add_friend_result_group_number {
  margin-left: 6px;
  vertical-align: top;
  position: relative;
  margin-top: -10px;
}

.div_right_add_friend_result_group_type{
  vertical-align: top;
  position: relative;
  margin-left: 6px;
  margin-top: -10px;
}

.div_right_add_friend_result_group_introduce{
  font-size: 14px;
  height: 38px;
  overflow: hidden;
}

.div_right_add_friend_result_group_button{
  margin-left: 240px;
  padding-bottom: 0px;
}

</style>